<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            border: 0;
        }

        body {
            background-color: #000;
        }

        li {
            list-style: none;
        }

        .box {
            width: 600px;
            height: 400px;
            /* background-color: pink;   */
            margin: 100px auto;
            border: 2px solid red;
            overflow: hidden;
            position: relative;
        }

        .box .images {
            width: 9999px;
            position: relative;
            top: 0;
            left: -600px;
        }

        .box .images li {
            width: 600px;
            height: 400px;
            float: left;
        }

        .images li img {
            width: 100%;
            height: 100%;
        }

        .images li {
            opacity: 1;
        }

        .box div {
            width: 50px;
            height: 50px;
            cursor: pointer;
        }

        .box .left {
            position: absolute;
            top: 175px;
            background: url(./images/向左.png);
            background-size: 100% 100%;
        }

        .box .right {
            position: absolute;
            top: 175px;
            right: 0;
            background: url(./images/向右.png);
            background-size: 100% 100%;
        }

        .round {
            height: 30px;
            position: absolute;
            bottom: 10px;
            right: 0px;
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }

        .round li {
            width: 10px;
            height: 10px;
            border: 1px solid #fff;
            border-radius: 50%;
            margin: 0 10px;
            background-color: #ccc;
        }

        .round .select {
            background-color: red;
        }
    </style>
    <!-- <script>
        window.addEventListener('load', function () {

            //获取左右两边按钮
            var letfBtn = document.querySelector('.left')
            var rightBtn = document.querySelector('.right')

            //获取ul
            var ulEle = document.querySelector('.box .images')
            //第一张图片和最后一张图片
            var firstImg = ulEle.firstElementChild
            var lastImg = ulEle.lastElementChild
            // 初始li标签的个数 
            var liCount = ulEle.children.length

            // 获取第一个真实li元素
            var firstLiEle = ulEle.firstElementChild
            // 获取最后一个真实li元素
            var lastLiEle = ulEle.lastElementChild
            // li 标签的宽度
            var liWidth = firstLiEle.offsetWidth

            // 追加到末尾
            ulEle.appendChild(firstLiEle.cloneNode(true))
            // 将最后一个元素插入到第一个位置
            ulEle.insertBefore(lastLiEle.cloneNode(true), firstLiEle)

            // 改变ul的宽度
            ulEle.style.width = ulEle.children.length * liWidth + 'px'
            ulEle.style.left = -liWidth + 'px'

            // 记录图片位置
            var index = 1

            //点击左按钮
            letfBtn.addEventListener('click', function () {
                console.log('点击左按钮');
                console.log('点击右按钮');
                ++index
                anim(ulEle, -index * liWidth, function () {
                    console.log(index);
                    if (index > liCount) {
                        ulEle.style.left = -liWidth + 'px'
                        index = 1
                    }
                    console.log(index);

                    selectItem(index)
                })
            })

            //点击右按钮
            rightBtn.addEventListener('click', function () {
                console.log('点击右按钮');
                --index
                anim(ulEle, -index * liWidth, function () {
                    if (index < 1) {
                        ulEle.style.left = -liCount * liWidth + 'px'
                        index = 3
                    }
                    console.log(index);
                    selectItem(index)

                })
            })


            // 获取小圆圈
            var iListEles = document.querySelector('.round')

            for (var i = 0; i < iListEles.children.length; i++) {
                var iItemEle = iListEles.children[i]
                // 设置 索引
                iItemEle.setAttribute('data-index', i + 1)

                iItemEle.addEventListener('click', function () {
                    console.log(this.dataset.index);
                    if (this.dataset.index == index) {
                        return
                    }
                    //改变索引
                    index = this.dataset.index - 0
                    selectItem(index)
                    // 索引控制动画范围
                    anim(sliderUlEle, -index * liWidth)

                })
            }


            // 选中指示器
            function selectItem(indexNum) {
                // 排他
                for (var j = 0; j < iListEles.children.length; j++) {
                    if (indexNum === j + 1) {
                        iListEles.children[j].className = 'select'
                    } else {
                        iListEles.children[j].className = ''
                    }
                }
            }
        })

        // 动画简单封装
        function anim(element, endPoint, callback) {
            // console.log('点击次数', element.timer);

            // 节流 防止 时间循环 被 多次触发
            if (element.timer) {
                return
            }
            var time = setInterval(function () {
                // 使用 元素属性 记录开启的时间循环
                element.timer = time
                if (element.offsetLeft === endPoint) {
                    clearInterval(time)
                    element.timer = null

                    // 逻辑与 中断
                    callback && callback()
                    return
                }
                var num = (endPoint - element.offsetLeft) / 8
                num = num > 0 ? Math.ceil(num) : Math.floor(num)

                // console.log('num:', num);
                element.style.left = element.offsetLeft + num + 'px'

            }, 20)
        }
    </script> -->
</head>

<body>

    <div class="box">
        <ul class="images">
            <li><img src="./images/0.jpg" alt=""></li>
            <li><img src="./images/1.jpg" alt=""></li>
            <li><img src="./images/2.jpg" alt=""></li>
            <li><img src="./images/3.jpg" alt=""></li>
            <li><img src="./images/4.jpg" alt=""></li>
        </ul>
        <div class="left"></div>
        <div class="right"></div>
        <ul class="round">
            <li class="select"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

    <script src="./js/pcLunbo.js"></script>
</body>

</html>